<script setup lang="ts"></script>

<template>
  <main class="main-wrap" v-hl>
    <div class="dev-wrap">
      <div class="doc-wrap">
        <div class="doc-sub">1.1 组件规范</div>
        <div class="doc-text">
          <div class="doc-sub">1.1.1 组件名为多个单词</div>
          <div class="text">
            组件名应该始终是多个单词组成（大于等于 2），且命名规范为 KebabCase 格式。
          </div>
          <div class="text">
            这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML
            元素名称都是单个单词的。
          </div>
          <div class="text">
            <div class="text">不推荐</div>
            <pre><code class="vue">export default {
  name: 'todo-item',
  // ...
}
</code></pre>
            <div class="text">推荐</div>
            <pre><code class="vue">export default {
  name: 'TodoItem'
  // ...
};</code></pre>
          </div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.1.2 组件文件名为 pascal-case 格式</div>
          <div class="text">
            <div class="text">不推荐</div>
            <pre><code class="json">components/
|- myComponent.vue
|- MyComponent.vue
</code></pre>
            <div class="text">推荐</div>
            <pre><code class="json">components/
|- my-component.vue</code></pre>
          </div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.1.3 基础组件文件名为 base 开头，使用完整单词而不是缩写</div>
          <div class="text">
            <div class="text">不推荐</div>
            <pre><code class="json">components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue</code></pre>
            <div class="text">推荐</div>
            <pre><code class="json">components/
|- base-button.vue
|- base-table.vue
|- base-icon.vue</code></pre>
          </div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">1.1.4 和父组件紧密耦合的子组件应该以父组件名作为前缀命名</div>
          <div class="text">
            <div class="text">不推荐</div>
            <pre><code class="json">components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
|- UProfOpts.vue （使用了缩写）</code></pre>
            <div class="text">推荐</div>
            <pre><code class="json">components/
|- todo-list.vue
|- todo-list-item.vue
|- todo-list-item-button.vue
|- user-profile-options.vue （完整单词）</code></pre>
          </div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">
            1.1.5 在 Template 模版中使用组件，应使用 PascalCase 模式，并且使用自闭合组件
          </div>
          <div class="text">
            <div class="text">不推荐</div>
            <pre><code class="vue">&lt;my-component /&gt;</code></pre>
            <div class="text">推荐</div>
            <pre><code class="vue">&lt;MyComponent /&gt;</code></pre>
          </div>
        </div>
      </div>
      <div class="doc-wrap">
        <div class="doc-sub">2.1 Vue 项目目录规范</div>
        <div class="doc-text">
          <div class="doc-sub">2.1.1 基础</div>
          <div class="text">vue 项目中的所有命名尽量要与后端命名统一</div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">2.1.2 Vue项目构建</div>
          <div class="text">使用webpack或vite构建项目，具体操作参考以下文档：</div>
          <div class="text">https://cli.vuejs.org/zh/</div>
          <div class="text">https://vitejs.cn/</div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">2.1.3 目录说明</div>
          <div class="text">
            目录名按照上面的命名规范，其中 components 组件用大写驼峰，其余除 components
            组件目录外的所有目录均使用 kebab-case 命名
          </div>
          <div class="text">
            <pre><code class="json">public                            服务器根目录
src                               源码目录
  |-- api                         所有api接口
  |-- assets                      静态资源，images, icons, styles等
  |-- components                  公用组件
  |-- config                      配置信息
  |-- mock                        模拟接口，临时存放
  |-- router                      路由，统一管理
  |-- store                       vuex, 统一管理
  |-- themes                      自定义样式主题
  |-- views                       视图目录
  |   |-- role                    role模块名
  |   |-- |-- role-list.vue       role列表页面
  |   |-- employee                employee模块</code></pre>
          </div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">2.1.4 注释说明</div>
          <div class="text">整理必须加注释的地方</div>
          <div class="text">1、api 目录的接口 js 文件必须加注释</div>
          <div class="text">2、store 中的 state, mutation, action 等必须加注释</div>
          <div class="text">3、vue 文件中的 template 必须加注释，若文件较大添加 start end 注释</div>
          <div class="text">4、vue 文件的 methods，每个 method 必须添加注释</div>
          <div class="text">5、vue 文件的 data, 非常见单词要加注释</div>
          <div class="text">...</div>
        </div>
        <div class="doc-text">
          <div class="doc-sub">2.1.5 其他</div>
          <div class="text">1、尽量不要手动操作 DOM</div>
          <div class="text">2、删除无用代码</div>
          <div class="text">2、store 中的 state, mutation, action 等必须加注释</div>
          <div class="text">3、vue 文件中的 template 必须加注释，若文件较大添加 start end 注释</div>
          <div class="text">4、vue 文件的 methods，每个 method 必须添加注释</div>
          <div class="text">5、vue 文件的 data, 非常见单词要加注释</div>
          <div class="text">...</div>
        </div>
      </div>
    </div>
  </main>
</template>

<style scoped lang="scss">
.main-wrap {
  @include size(100%, 100%);
  padding: 24px;
  overflow-y: auto;
  background: #fff;
}
.dev-wrap {
  .dev-t1 {
    @include font(14px, 1.4, #333);
    font-weight: bold;
    margin-bottom: 15px;
  }
  .doc-wrap {
    padding-left: 5px;
    margin-bottom: 15px;
    &:last-of-type {
      margin-bottom: 0;
    }
    .doc-sub {
      @include font(13px, 1.4, #333);
      font-weight: bold;
      margin-bottom: 10px;
    }
    .doc-text {
      @include font(13px, 1.4, #333);
      padding-left: 5px;
      margin-bottom: 10px;
      &:last-of-type {
        margin-bottom: 0;
      }

      .text {
        @include font(13px, 1.4, #333);
        margin-bottom: 8px;
        padding-left: 5px;
        &:last-of-type {
          margin-bottom: 0;
        }
        .text {
          @include font(13px, 1.4, #333);
          margin: 12px 0 6px 0;
        }
        pre {
          display: block;
          margin: 0 0 4px 0;
          code {
            display: block;
            padding: 10px;
            background: #282c34;
            color: #abb2bf;
          }
        }
      }
    }
  }
}
</style>
